<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人网页</title>
	
	</head>
	<style>
		*{
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
	height: 100vh;
	background: #333333;
	color: #FFFFFF;
}
/* 去掉无序列表的默认样式 */
li{
	list-style: none;
}
.box{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 内容区域 */
.content{
	width: 1000px;
	margin: auto;
}
/* 首页标题 */
.title{
	font-size: 30px;
	letter-spacing: 2px;
	margin-bottom: 20px;
}
/* 顶部 */
.box-top{
	display: flex;
	justify-content: space-between;
}
.bt-l{
	width: 650px;
}
.bt-l p{
	line-height: 1.8;
	margin-bottom: 20px;
}
.bt-l ul{
	display: flex;
	justify-content: space-between;
}
.bt-l ul li{
	width: 48%;
	height: 200px;
}
.bt-l ul li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bt-r{
	width: 320px;
}
.bt-r img{
	width: 100%;
	height: 305px;
	object-fit: cover;
}
/* 首页底部个人信息 */
.box-bottom{
	background: #FFFFFF;
	color: #333333;
	padding: 20px;
}
.box-bottom ul li {
	display: flex;
	align-items: center;
	padding: 15px 0;
	font-size: 18px;
	color: #666666;
	border-bottom: 1px dashed #CCCCCC;
}
.box-bottom ul li span{
	font-weight: 600;
	color: #333333;
}
.footer{
	text-align: center;
	margin-top: 10px;
}
	</style>
	<body>
		<!-- 大盒子 -->
		<div class="box">
			<div class="content">
				<h3 class="title">个人网页</h3>
				<div class="box-top">
					<div class="bt-l">
						<!-- 个人介绍 -->
						<p>我，爱笑，爱乐，爱简单，爱热闹，爱听音乐爱交朋友，爱自由自在，爱与众同乐，爱hold不住的兴奋，也爱无厘头的搞笑，爱安安静静的自得其乐，也爱疯疯癫癫的热热闹闹，我就是这样，不管你欣赏不欣赏，我依然在自己的人生道路上跌跌撞撞而又不失姿态的走下去。
			喜欢旅游喜欢拥抱大自然，喜欢一切会让我快乐东西和事物
                        </p>
						<ul>
							<li>
								<img src="img\1.png.jpg" alt="" width="200" height="200">
							</li>
							<li>
								<img src="img\2.png.jpg" alt="" width="200" height="200">
							</li>
						</ul>
					</div>
					<div class="bt-r">
						<img src="img\3.png.jpg" alt="" weight="200" height="200">
					</div>
				</div>
				<div class="box-bottom">
					<ul>
						<li>
							<span>姓名：</span>
							<p>扎西洋宗</p>
						</li>
						<li>
							<span>学号：</span>
							<p>XH2021000001</p>
						</li>
						<li>
							<span>班级：</span>
							<p>23软件技术一班</p>
						</li>
						<li>
							<span>专业特长：</span>
							<p>目前正在努力升级打怪中</p>
						</li>
						<li>
							<span>爱好：</span>
							<p>跳舞，手工，玩游戏</p>
						</li>
					</ul>
				</div>
				<!-- 底部 -->
			代码仓库：<a href="https://gitee.com/zhaxi-yangzong/yangzong-kuyang">https://gitee.com/zhaxi-yangzong/yangzong-kuyang</a>
				<div class="footer">
					<p>版权所有： 扎西洋宗</p>
				</div>
			</div>
		</div>
	</body>
</html>
